<div class="body-main" style="background: url('<?php echo BASE_URI; ?>img/bg3.jpg');background-size:100% 100% !important;">
  <div id="body-main-bg" class="row"><br><br><br>
    <div class="orbit-container large-11 large-centered column" style="padding:0 2rem 0 2rem;">

    <ul class="text-center example-orbit-content" data-orbit data-options="animation:slide;
        animation_speed:100;
        navigation_arrows:true;timer:false;slide_number: false;
        bullets:false;"> 
      <li data-orbit-slide="headline-1"> 
        <div> 
          <h1 style="font-size:4.2rem;letter-spacing:.3rem;">Connecting people at home</h1> 
          <h3 style="color:white;">The place where Filipino home-based professionals belong</h3> 
        </div> 
      </li> 
      <li data-orbit-slide="headline-2"> <div class="large-10 large-centered column">
       <div class="large-4 columns"> 
       <div class="medium-6 medium-centered large-6 columns">
          <img src="<?php echo BASE_URI; ?>img/icons/Socialize-Icon.png" style="width:8rem;height:8rem;">
        </div>
        <h3  style="color:white;">Socialize</h3> 
        <p style="color:white;">Connect with more than thousands of home based professioanls</p>
      </div> 
       <div class="large-4 columns"> 
       <div class="medium-6 medium-centered large-6 columns">
          <img src="<?php echo BASE_URI; ?>img/icons/Opportunity-Icon.png" style="width:8rem;height:8rem;">
        </div>
        <h3 style="color:white;">Disover Oppurtunities</h3> 
        <p style="color:white;">Know the most trusted companies and clients to work with</p>
      </div> 
       <div class="large-4 columns"> 
       <div class="medium-6 medium-centered large-6 columns">
          <img src="<?php echo BASE_URI; ?>img/icons/Expand-Icon.png" style="width:8rem;height:8rem;">
        </div>
        <h3 style="color:white;">Expand Network</h3> 
        <p style="color:white;">Converse with people about certain topics that will surely help your growth as homebased worker</p>
      </div> </div>
    </li>  
    </ul>
  </div>
  </div>
</div>
<div id="header" class="row">      
    <p href="#header" class="toggle text-center"><a class="in">Know the Behomebased.ph Better</a></p>
</div>

<style>

#header {
    position: absolute; 
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 5%;
    overflow: hidden;
    background: #009EA1;
    padding-top: .24rem;
}
a.in {
  color:white;
}
a.in:hover {
  color:white;
}
body {
  overflow: hidden;
}
</style>



